<template>
  <section class="todoapp">
    <TodoListHeader @addList="addList"></TodoListHeader>
    <TodoListBody
      :list="list"
      @changeFlag="changeFlag"
      @delList="delList"
      @changeAll="changeAll"></TodoListBody>
    <TodoListFooter
      :sum="sum"
     :cleaBtn="cleaBtn"
    :listType="listType"
    @delAll="delAll"
    @changeType="changeType"></TodoListFooter>
  </section>
</template>
<script>
import TodoListHeader from './components/TodoListHeader .vue'
import TodoListBody from './components/TodoListBody.vue'
import TodoListFooter from './components/TodoListFooter.vue'
export default {
  components: {
    TodoListHeader,
    TodoListBody,
    TodoListFooter,
  },
  data() {
    return {
      list: JSON.parse(localStorage.getItem('list')) || [
        {
          flag: true,
          id: 1,
          value: '读万卷书'
        },
        {
          flag: false,
          id: 2,
          value: '行万里路'
        }
      ],
      listType: 'all'
    }
  },
  watch: {
    list: {
      immediate: true,
      deep: true,
      handler(newVal) {
        localStorage.setItem('list', JSON.stringify(newVal))
      }
    }
  },
   computed: {
    sum() {
      return this.list.filter((item) => !item.flag).length
    },
    cleaBtn() {
      return this.list.some((item) => item.flag)
    },
  },
  methods: {
  // 添加
    addList(value) {
      this.list = [...this.list,
        {
          flag: false,
          id: +new Date(),
          value
        }
      ]
    },
    changeFlag(id, flag) {
      this.list.forEach((item) => {
        if (item.id === id) item.flag = flag
      })
    },
    // 删除
    delList(id) {
       this.list.find((item) => item.id === id)
      this.list = this.list.filter((item) => item.id !== id)
    },
    delAll() {
      this.list = this.list.filter((item) => !item.flag)
    },
    changeType(value) {
      this.listType = value
    },

// 更改状态
    changeAll(flag) {
      this.list.forEach((item) => (item.flag = flag))
    }
  }, 
}
</script>

<style></style>
